<html>
<head>
	<title>LR</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">	
	<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
	<script type="text/javascript" src="/js/lrmain.js"></script>
	<script type="text/javascript" src="/js/stdlib.js"></script>
	<script type="text/javascript" src="/js/applib.js"></script>
	<script type="text/javascript" src="/js/ScriptAjax.js"></script>
	<script type="text/javascript" src="/js/ReactiveListH.js"></script>

	<!-- main css-->
	<style type="text/css">
		#body{
			color:#eeeeee;
			width:1024px;
			margin:0px;
			padding:8px;
			border:none;
			background-color:black;
		}
		#header
		{
			width:100%;
			font-size:large;
			
		}
		#left
		{
			width:319px;
			float:left;
			border-width:0px 0px 0px 1px;
			border-style:solid;
			border-color:black;
		}
		#status
		{
			height:60px;
		}
		#map
		{
			border:none 0px black;
			width:100%;
			height:320px;
		}
		#right
		{
			float:left;
			width:696px;/*1024-320-8*/
			border-width:0px 0px 0px 1px;
			border-style:solid;
			border-color:black;
		}
		#main{
			width:100%;
		}
		#left > *.title,#right > *.title
		{
			background-color:#000077;
			width:100%;
		}
		span.title
		{
			margin:5px;
			font-size:smaller;
			font-weight:bolder;
		}
		#images
		{
			width:100%;
			height:100%;
			margin:0px;
		}
		
		#tldiv
		{
			width:100%;
			height:320px;
			margin:0px;
		}
		#footer
		{
			width:100%;
		}
	</style>
	<!-- timeline css-->
	<style type="text/css"> 
		#tldiv div.row{
			border-width:0px 0px 1px 0px;
			border-color:#aaaaaa;
			margin:5px 5px 10px 5px;
			border-style:solid;
		}
		#tldiv img.icon{
			width:24px;
			height:24px;
			margin-right:10px;
			float:left;		
		}
		#tldiv div.title{
			height:24px;
			vertical-align:top;
			float:none;
		}
		#tldiv div.title a{
		    color:#7777ff;
		    text-decoration:none;
		}
		#tldiv div.title a:hover{
		    color:#aaaaff;
		    text-decoration:underline;
		}		
		#tldiv span.sname{
			font-size:normal;
			font-weight:bold;
		}
		#tldiv span.name{
			font-size:small;
			color:#aaaaaa;
			margin-left:5px;
		}
		#tldiv span.time{
			font-size:smaller;
			color:#aaaaaa;
		}
		#tldiv div.text{
			font-size:small;
			font-size:normal;
		}
		#tldiv div.text a{
		    color:#00cc00;
		    text-decoration:none;
		}
		#tldiv div.text a:visited{
		    color:#007700;
		    text-decoration:none;
		}
		#tldiv div.text a:hover{
		    color:#00ff00;
		    text-decoration:underline;
		}
		#tldiv img.img{
			height:48px;
			margin:2px;
			border-style:solid;
			border-width:1px;
			border-color:#555555;
		}
		#tldiv div.trow{
			border-width:1px 0px 1px 0px;
			border-color:#00ff00;
			padding:3px;
			border-style:solid;
			background-color:#003900;
			font-size:small;
		}
		#tldiv div.ttitle{
			margin:0px 5px 0px 0px;
			font-weight:bold;
		}
	</style>
	<script id="ajax" type="text/javascript"></script>
	<script type="text/javascript">
/*		//Google Analitics
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-3136996-9']);
		_gaq.push(['_trackPageview']);
		(function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();*/
	</script>
</head>
<body id="body" onload="_onload();">
<script type='text/javascript'>


/*
var app;

function formatTree(i_md)
{
	var _t=this;
	function formatTreeB(i_md,i_parent, i_depth){
		var st
		for (var i = 0; i < i_md.length; i++) {
			var d = i_md[i];
			d.parent=i_parent;
			_t.addArea(d,i_depth);
			if (d.c == undefined) {
				continue;
			}
			var depth = i_depth + 1;
			formatTreeB(d.c,d, depth > 1 ? 1 : depth);
		}
	}
	formatTreeB(i_md,null,0);
}

function jsonpRegionData(i_md,i_md_index)
{
	app.md_index=i_md_index;
	app.md=i_md;
	formatTree.apply(app,[i_md,i_md_index]);
	
}
*/
var app;
function _onload(i_tag_ids)
{
	function resizeWindow()
	{
		var re=gElemById("right");
		var le=gElemById("left");//1024-8*2-320
		var tl=gElemById("tldiv");
//		re.style.width=(window.innerWidth-(le.offsetLeft+le.offsetWidth)-2-8*2)+"px";
		re.style.height=(window.innerHeight-re.offsetTop-2)+"px";
//		tl.style.height=(re.offsetHeight-(tl.offsetTop-re.offsetTop))+"px";
	}
	window.onresize=function(e)
	{
		resizeWindow();
	}
	app=installLrApp(30000,{map:'map',ajax:'ajax',tl:'tldiv'});
	resizeWindow();
}

</script>
<div id="header">
	<span>にゃんこ衛星II</span>
</div>
<div id="main">
	<div id="left">
		<div class="title"><span class="title">Map</span></div>
		<div id="map"></div>
		<div class="title"><span class="title">Status</span></div>
		<div id="status">
			仮想衛星<br/>
			受信レート<br/>
			収集エリア<br/>
			通信量<br/>
			軌道設定<br/>
		</div>
	</div>
	<div id="right">
		<div class="title"><span class="title">Received Timeline</span></div>
		<div id="tldiv"></div>
		<div class="title"><span class="title">Images</span></div>
		<div id="images"></div>
	</div>
</div>
<div id="footer"></div>
<div width="100%" align="right"></div>
</body>
</html>